<!doctype html>
<html lang="en" data-framework="javascript">
	<head>
		<meta charset="utf-8">
		<title>Todos</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<section class="logo">
			<img src="logo.jpg" alt="maumaumau">
		</section>
		<section class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<input class="new-todo" placeholder="What needs to be done?" autofocus>
			</header>
			<section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list"></ul>
			</section>
			<footer class="footer">
				<span class="todo-count"></span>
				<ul class="filters">
					<li>
						<a href="#/" class="selected">All</a>
					</li>
					<li>
						<a href="#/active">Active</a>
					</li>
					<li>
						<a href="#/completed">Completed</a>
					</li>
				</ul>
				<button class="button clear-completed">Clear completed</button>
			</footer>
		</section>
		<footer class="info">
			<p>Double-click to edit a todo</p>
			<div class="button-container">
				<button class="toggle-fullscreen">fullscreen</button>
			</div>
		</footer>

		<script src="script.js"></script>

	</body>
</html>
